<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>使用fetch从服务器端获取数据</title>
		<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
		<script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/Underscore-1.8.3min.js"></script>
		<script src="js/backbone.js"></script>
		<script type="text/javascript">
		</script>
	</head>

	<body>
		<script type="text/javascript">
			var Animal = Backbone.Model.extend({
				initialize: function() {
					console.log();
				},
				defaults: function() {
					name: "宠物"
				}
			});
			var AnimalList = Backbone.Collection.extend({
				model: Animal
			});
			var cat1 = new Animal({
				name: "黑喵"
			});
			var cat2 = new Animal({
				name: "黄喵"
			});
			var cat3 = new Animal({
				name: "白喵"
			});
			animallist = new AnimalList;
			animallist.add(cat1);
			animallist.add(cat2);
			animallist.add(cat3); 
			
			animallist.each(function(cat){
				console.log(cat.get("name"));
			});
			
			//读取服务器的数据
 			animallist.url="http://localhost:8080/backbone/servlet/json";
//			$.ajax({
//			   type: "POST",
//			   url: "http://192.168.171.100:8080/backbone/servlet/json",
//			   dataType: "jsonp",
//			   success: function(msg){
//			      console.log(msg);
//			   }
//			});
			 animallist.fetch({
				success:function(collection,response,options){
					collection.each(function(animal){
						console.log(animal.get('name'));
					});
				},
				error:function(){
					console.log("又碰到跨域问题了");
				}
			});
			
		</script>
	</body>
</html>